<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css">

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .header {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #01AAED;
            color: white;
        }

        .title {
            margin-left: 20px;
            font-size: 20px;
        }

        .userinfo {
            float: right;
            margin-right: 15px;
        }

        .userinfo a {
            text-decoration: none;
            color: #f88f05;
        }

        .userinfo a:hover {
            color: #f8f405;
        }

        .menu {
            width: 200px;
            background-color: #393D49;
            position: absolute;
            height: calc(100% - 50px);
        }

        .main {
            position: absolute;
            left: 200px;
            right: 0;
            height: calc(100% - 50px);
        }

        .layui-this a {
            color: #ff9800 !important;
        }
    </style>
</head>

<body>
    <div class="header">
        <span class="title">后台管理系统</span>
        <span class="userinfo">
            {$username}&nbsp;&nbsp;[{$rolename}]&nbsp;&nbsp;
            <a href="javascript:;" onclick="logout()">退出</a>
        </span>

    </div>

    <!-- 导航菜单 -->
    <div class="menu">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!-- 加layui-nav-itemed样式类为展开菜单 -->

            {volist name='menus' id='menu'}
            <li class="layui-nav-item">
                <a href="javascript:;">{$menu.title}</a>
                {if (isset($menu.children) && $menu.children)}
                <dl class="layui-nav-child">
                    {volist name='menu.children' id='ch'}
                    <dd><a href="javascript:;" onclick="menulist(this)"
                            src="/admin/{$ch.controller}/{$ch.method}">{$ch.title}</a></dd>
                    {/volist}
                </dl>
                {/if}
            </li>
            {/volist}


            <!-- <li class="layui-nav-item">
                <a href="javascript:;">管理员管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="adminlist(this)" src="/admin/admin/list">管理员列表</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">权限管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="menulist(this)" src="/admin/menu/list">菜单列表</a></dd>
                    <dd><a href="javascript:;" onclick="rolelist(this)" src="/admin/role/list">角色列表</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">系统管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="">测试测试</a></dd>
                </dl>
            </li> -->
        </ul>
    </div>

    <!-- 主操作区 -->
    <div class="main">
        <iframe src="/admin/welcome" style="width: 100%;height: 100%;" frameborder="0" scrolling="0"></iframe>
    </div>



    <script src="/static/layui/layui.js"></script>
    <script>
        layui.use('layer', function () {
            layer = layui.layer;
            $ = layui.jquery;
        });

        // 退出登录
        function logout() {
            layer.confirm('确认退出吗?', { icon: 3, title: '提示' }, function (index) {
                $.get('/admin/logout', function (res) {
                    if (res.code == 200) {
                        window.location.href = '/admin/login';
                        window.location.reload();
                    }
                });

                layer.close(index);
            });
        }

        // 管理员列表点击
        function adminlist(obj) {
            var src = $(obj).attr('src');
            $('iframe').attr('src', src);
        }

        // 菜单列表点击
        function menulist(obj) {
            var src = $(obj).attr('src');
            $('iframe').attr('src', src);
        }

        // // 角色列表点击
        // function rolelist(obj) {
        //     var src = $(obj).attr('src');
        //     $('iframe').attr('src', src);
        // }

    </script>
</body>

</html>